<template>
  <div>
    <van-nav-bar title="搜索" 
      left-text="返回" 
      left-arrow 
      @click-left="onHome"/>

    <van-search
      v-model="shop.shopName"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
    >
      <template #action>
        <div @click="onSearch" id="search">搜索</div>
      </template>
    </van-search>

    <van-row v-if="!isShow">
      <span id="reSearch">热门搜索</span>
      <!-- 分割线 -->
      <van-divider />
      <div id="remen" v-for="item in mark" :key="item.id">
        <van-button size="small" type="default">{{ item.name }}</van-button>
      </div>
    </van-row>
    <van-row v-else >
      <van-col v-for="(item,index) in container" :key="index" span="24">
        <van-cell-group inset>
          <Stores :item="item"/>
        </van-cell-group>
      </van-col> 
    </van-row>

  </div>
</template>

<script>
import { Toast } from 'vant';
import axios from 'axios';

import Stores from '../shop/Stores.vue'
export default {
  name:"Search",
  components:{Stores},
  data() {
    return {
      value: '',
      mark:[
          {id:1,name:"螺蛳粉"},
          {id:2,name:"李记螺蛳粉"},
          {id:3,name:"莫记螺蛳粉"},
          {id:4,name:"粥"},
          {id:5,name:"五谷鱼粉"},
          {id:6,name:"沙县小吃"},
          {id:7,name:"李记螺蛳粉"},
          {id:8,name:"莫记螺蛳粉"},
          {id:9,name:"粥"}
      ],
      shop:{
        page:1, // 页码
        limit:20, // 每页数量
        shopName:'' 
      },
      container:[],
      isShow:false

    };
  },
  methods: {
    onSearch() {
      if (this.shop.shopName === '') {
        Toast("搜索框不能为空！");
        return
      }
      axios.post("/api/shop/getListShopPaging",this.shop)        
        .then(res => {    
          if (res.data.code === 200) {
            console.log(res.data.data);
            this.container = res.data.data;
            this.isShow = true
          }
          
        })        
        .catch(err => {            
            console.log(err.data)        
        }) 
    },
    onHome(){
      this.$router.push({path:"/"})
    }
  },
};


</script>

<style>
#search{
  color: rgb(255, 187, 52);
}


#reSearch{
  color:rgb(87, 84, 88);
  margin-left: 13px;
  font-size: 8px;
  /* 字体加粗 */
  /* font-weight: bold; */
}

#remen{
  float: left;
  margin-left: 13px;
  margin-top: 10px;
}

</style>
